<template>
  <div class="jxxq">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <el-input placeholder="输入项目关键字" size="mini"></el-input>
          <ul class="arrlist">
            <li
              v-for="i in arrListA"
              :key="i"
              class="infinite-list-item"
              @click="arrListBStatus = true"
            >
              {{ i }}
            </li>
          </ul>
          <section style="float: right; margin-bottom: 30px; margin-top: 20px">
            <el-button type="primary" size="mini">上一页</el-button>
            <el-button type="primary" size="mini">下一页</el-button>
          </section>
        </el-card>
      </el-col>
      <el-col :span="8" v-if="arrListBStatus">
        <el-card>
          <el-input placeholder="输入镜像关键字" size="mini"></el-input>
          <ul class="arrlist">
            <li
              v-for="i in arrListB"
              :key="i"
              class="infinite-list-item"
              @click="arrListCStatus = true"
            >
              {{ i }}
            </li>
          </ul>
          <section style="float: right; margin-bottom: 30px; margin-top: 20px">
            <el-button type="primary" size="mini">上一页</el-button>
            <el-button type="primary" size="mini">下一页</el-button>
          </section>
        </el-card>
      </el-col>
      <el-col :span="8" v-if="arrListCStatus">
        <el-card>
          <el-input placeholder="输入标签关键字" size="mini"></el-input>
          <ul class="arrlist">
            <li v-for="i in arrListC" :key="i" class="infinite-list-item">
              {{ i }}
            </li>
          </ul>
          <section style="float: right; margin-bottom: 30px; margin-top: 20px">
            <el-button type="primary" size="mini">上一页</el-button>
            <el-button type="primary" size="mini">下一页</el-button>
          </section>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrListAStatus: true,
      arrListBStatus: false,
      arrListCStatus: false,
      arrListA: [
        'bboss_ads',
        'bboss_server',
        'bboss_new_crm',
        'balck_pass_new',
        'bboss_new_server',
        'server_api_job'
      ],
      arrListB: [
        'bboss_ads',
        'bboss_ads/abs-server-web',
        'bboss_ads/ads-server-config',
        'bboss_ads/abs-server',
        'bboss_ads/abs-project',
        'bboss_ads/abs-show-never'
      ],
      arrListC: [
        '201909070504',
        '201712080915',
        '201510060804',
        '201712120809',
        '202010070803',
        '201903070404'
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.jxxq {
  .arrlist {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      background: #e8f3fe;
      color: #7dbcfc;
      padding: 8px 0;
      padding-left: 20px;
      margin: 10px;
      cursor: pointer;
    }
  }
}
</style>
